<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/example_detail.css">
    <script src="/js/jquery-1.8.3.min.js"></script>
    <script src="/js/qrcode.js"></script>
</head>
<body>
    <header class="header">
        <div class="wrap">
            <div class="logo">
                <img src="/img/logo.png" alt="">
            </div>
            <div class="right-content">
                <div class="link">
                    <a href="/distributor.html" class="link-cell">
                        <span class="icon"><img src="/img/header-icon-1.png" alt=""></span>
                        <span class="name">经销商登录</span>
                    </a>
                    <a href="/quailty.html" class="link-cell">
                        <span class="icon"><img src="/img/header-icon-1.png" alt=""></span>
                        <span class="name">质保查询</span>
                    </a>
                </div>
                <ul class="menu">　
                    <li class="menu-cell"><a href="/">首页</a></li>
                    <li class="menu-cell"><a href="/brand.html">品牌</a></li>
                    <li class="menu-cell">
                        <a>产品</a>
                        <!-- 产品二级导航 -->
                        <div class="sub-menu">
                            <div class="sub-menu__wrap">
                                <a href="product.html" class="sub-menu__cell">产品介绍</a>
                                <a href="/quoted_part.html" class="sub-menu__cell">产品报价</a>
                            </div>
                        </div>
                    </li>
                    <li class="menu-cell active"><a href="/example.html">案例</a></li>
                    <li class="menu-cell"><a href="/news.html">资讯</a></li>
                    <li class="menu-cell"><a href="/store.html">门店</a></li>
                </ul>
            </div>
        </div>
    </header>
    <div class="example-detail linear">
        <div class="banner"><img src="/img/example/banner.png"></div>
        <div class="top">
            <div class="top-wrap">
                <h3 class="name">案例赏析</h3>
                <div class="select">
                    <div class="select-cell" onclick="selectModlaCategory()">
                        <span class="txt">选择产品类别</span>
                        <span class="icon">&gt;</span>
                    </div>
                    <div class="select-cell" onclick="selectModlaBrand()">
                        <span class="txt">选择品牌</span>
                        <span class="icon">&gt;</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="wrap">
            <div class="wrap-content">
                <div class="tab" onclick="tabChange(event, this)">
                    <div class="tab-cell active" value="1">图片</div>
                    <div class="tab-cell" value="2">视频</div>
                </div>
                <div class="article" id="article" style="display: block;">
                    <div class="title">奥迪S8L</div>
                    <p>nti waterspot 抗水渍</p>
                    <p>anti acid 耐酸性</p>
                    <p>Extreme high-gloss and optical clarity 超高光泽度和光学清晰度</p>
                    <p>Self-healing from minor scratching, etc 自愈轻微划痕</p>
                    <p>Anti-contaminant, non-yellowing 抗污染物，耐黄变</p>
                    <p>膜厚度为10mil</p>
                    <img src="/img/example/car-1.png">
                    <img src="/img/example/car-1.png">
                    <img src="/img/example/car-1.png">
                </div>
                <div class="video" id="video" style="display: none;">
                    <video width="100%" height="100%" controls="">
                        <source src="http://byafilm.sunthink.com.cn/attached/media/20210704/2.mp4" type="video/mp4">
                    </video>
                </div>
                <div class="share">
                    <span class="name">分享：</span>
                    <span id="share-weibo-1"><img src="/img/share-icon-1.png"></span>
                    <span id="share-wx-1"><img src="/img/share-icon-2.png"></span>
                    <span id="share-qq-1"><img src="/img/share-icon-3.png"></span>
                    <a href="/example.html" class="back">【返回列表】</a>
                </div>
                <div class="relative">
                    <div class="title">相关推荐</div>
                    <div class="list">
                        <a href="/example_detail.html" class="list-cell">
                            <div class="img"><img src="/img/example/list.png"></div>
                            <div class="name">奥迪R8 V10</div>
                            <p class="txt">无与伦比的质感和亮度 </p>
                        </a>
                        <a href="/example_detail.html" class="list-cell">
                            <div class="img"><img src="/img/example/list.png"></div>
                            <div class="name">奥迪R8 V10</div>
                            <p class="txt">无与伦比的质感和亮度 </p>
                        </a>
                        <a href="/example_detail.html" class="list-cell">
                            <div class="img"><img src="/img/example/list.png"></div>
                            <div class="name">奥迪R8 V10</div>
                            <p class="txt">无与伦比的质感和亮度 </p>
                        </a>
                    </div>
                </div>
            </div>
            <!-- 选择产品类别 -->
            <div class="modal-select-category" id="modal-select-category" style="display: none;">
                <div class="modal-wrap">
                    <div class="modal-content">
                        <div class="brand-list">
                            <a href="">透明膜</a>
                            <a href="">改色膜</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 选择品牌 -->
            <div class="modal-select-brand" id="modal-select-brand" style="display: none;">
                <div class="modal-wrap">
                    <div class="modal-content">
                        <div class="title">选择品牌</div>
                        <div class="car">
                            <a href="" class="car-cell">
                                <div class="img"><img src="http://byafilm.sunthink.com.cn/attached/image/20190410/20190410152334_62246.png" alt=""></div>
                                <p>奥迪</p>
                            </a>
                            <a href="" class="car-cell">
                                <div class="img"><img src="http://byafilm.sunthink.com.cn/attached/image/20190409/20190409185132_83982.png" alt=""></div>
                                <p>阿斯顿马丁</p>
                            </a>
                            <a href="" class="car-cell">
                                <div class="img"><img src="http://byafilm.sunthink.com.cn/attached/image/20190409/20190409185121_97816.png" alt=""></div>
                                <p>阿尔法罗密欧</p>
                            </a>
                            <a href="" class="car-cell">
                                <div class="img"><img src="http://byafilm.sunthink.com.cn/attached/image/20190409/20190409184956_49936.png" alt=""></div>
                                <p>奔驰</p>
                            </a>
                            <a href="" class="car-cell">
                                <div class="img"><img src="http://byafilm.sunthink.com.cn/attached/image/20190409/20190409192420_58139.png" alt=""></div>
                                <p>本田</p>
                            </a>
                            <a href="" class="car-cell">
                                <div class="img"><img src="http://byafilm.sunthink.com.cn/attached/image/20190409/20190409162053_19095.png" alt=""></div>
                                <p>宝马</p>
                            </a>
                            <a href="" class="car-cell">
                                <div class="img"><img src="http://byafilm.sunthink.com.cn/attached/image/20190410/20190410184601_44070.png" alt=""></div>
                                <p>别克</p>
                            </a>
                            <a href="" class="car-cell">
                                <div class="img"><img src="http://byafilm.sunthink.com.cn/attached/image/20190410/20190410185432_66450.png" alt=""></div>
                                <p>比亚迪</p>
                            </a>
                            <a href="" class="car-cell">
                                <div class="img"><img src="http://byafilm.sunthink.com.cn/attached/image/20190410/20190410152334_62246.png" alt=""></div>
                                <p>奥迪</p>
                            </a>
                            <a href="" class="car-cell">
                                <div class="img"><img src="http://byafilm.sunthink.com.cn/attached/image/20190409/20190409185132_83982.png" alt=""></div>
                                <p>阿斯顿马丁</p>
                            </a>
                            <a href="" class="car-cell">
                                <div class="img"><img src="http://byafilm.sunthink.com.cn/attached/image/20190409/20190409185121_97816.png" alt=""></div>
                                <p>阿尔法罗密欧</p>
                            </a>
                            <a href="" class="car-cell">
                                <div class="img"><img src="http://byafilm.sunthink.com.cn/attached/image/20190409/20190409184956_49936.png" alt=""></div>
                                <p>奔驰</p>
                            </a>
                            <a href="" class="car-cell">
                                <div class="img"><img src="http://byafilm.sunthink.com.cn/attached/image/20190409/20190409192420_58139.png" alt=""></div>
                                <p>本田</p>
                            </a>
                            <a href="" class="car-cell">
                                <div class="img"><img src="http://byafilm.sunthink.com.cn/attached/image/20190409/20190409162053_19095.png" alt=""></div>
                                <p>宝马</p>
                            </a>
                            <a href="" class="car-cell">
                                <div class="img"><img src="http://byafilm.sunthink.com.cn/attached/image/20190410/20190410184601_44070.png" alt=""></div>
                                <p>别克</p>
                            </a>
                            <a href="" class="car-cell">
                                <div class="img"><img src="http://byafilm.sunthink.com.cn/attached/image/20190410/20190410185432_66450.png" alt=""></div>
                                <p>比亚迪</p>
                            </a>
                            <a href="" class="car-cell">
                                <div class="img"><img src="http://byafilm.sunthink.com.cn/attached/image/20190409/20190409192420_58139.png" alt=""></div>
                                <p>本田</p>
                            </a>
                            <a href="" class="car-cell">
                                <div class="img"><img src="http://byafilm.sunthink.com.cn/attached/image/20190409/20190409162053_19095.png" alt=""></div>
                                <p>宝马</p>
                            </a>
                            <a href="" class="car-cell">
                                <div class="img"><img src="http://byafilm.sunthink.com.cn/attached/image/20190410/20190410184601_44070.png" alt=""></div>
                                <p>别克</p>
                            </a>
                            <a href="" class="car-cell">
                                <div class="img"><img src="http://byafilm.sunthink.com.cn/attached/image/20190410/20190410185432_66450.png" alt=""></div>
                                <p>比亚迪</p>
                            </a>
                        </div>
                        <div class="close" onclick="closeModlaBrand()">+</div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            function tabChange(e, pdom) {
                var targetDom = e.target
                var domArr = [].slice.call(pdom.children)
                for (var index = 0; index < domArr.length; index++) {
                    var element = domArr[index]
                    var classeArr = element.getAttribute('class').split(' ')
                    classeArr = classeArr.filter(i => i !== 'active')
                    element.setAttribute('class', classeArr.join(' '))
                }
                var classeArr = targetDom.getAttribute('class').split(' ')
                classeArr.push('active')
                targetDom.setAttribute('class', classeArr.join(' '))

                var domArticle = document.getElementById('article')
                var domVideo = document.getElementById('video')
                if (targetDom.getAttribute('value') === '1') {
                    domArticle.style.display = 'block'
                    domVideo.style.display = 'none'
                } else {
                    domArticle.style.display = 'none'
                    domVideo.style.display = 'block'
                }
            }
        </script>
        <script>
            // 选择产品类别
            function selectModlaCategory () {
                var dom = document.getElementById('modal-select-category')
                if (dom.style.display == 'none') {
                    showModlaCategory()
                    closeModlaBrand()
                } else {
                    closeModlaCategory()
                }
            }

            function showModlaCategory () {
                var dom = document.getElementById('modal-select-category')
                dom.style.display = 'block'
            }

            function closeModlaCategory () {
                var dom = document.getElementById('modal-select-category')
                dom.style.display = 'none'
            }

            // 选择品牌
            function selectModlaBrand () {
                var dom = document.getElementById('modal-select-brand')
                if (dom.style.display == 'none') {
                    showModlaBrand()
                    closeModlaCategory()
                } else {
                    closeModlaBrand()
                }
            }

            function showModlaBrand () {
                var dom = document.getElementById('modal-select-brand')
                dom.style.display = 'block'
            }

            function closeModlaBrand () {
                var dom = document.getElementById('modal-select-brand')
                dom.style.display = 'none'
            }
        </script>
    </div>
    <footer class="footer">
        <div class="wrap">
            <div class="left-content">
                <img src="/img/logo.png">
                <div class="share">
                    <span class="name">分享：</span>
                    <span id="share-weibo"><img src="/img/share-icon-1.png"></span>
                    <span id="share-wx"><img src="/img/share-icon-2.png"></span>
                    <span id="share-qq"><img src="/img/share-icon-3.png"></span>
                </div>
            </div>
            <div class="right-content">
                <div class="link">　
                    <a href="/product.html" class="link-cell">产品介绍</a>
                    <a href="/quoted_part.html" class="link-cell">产品报价</a>
                    <a href="/distributor.html" class="link-cell">经销商登录</a>
                    <a href="/quailty.html" class="link-cell">质保查询</a>
                </div>
                <p class="phone">服务热线: <span>4001 618 615</span></p>
                <p class="record">2021@版权所有 拜亚(山东)薄膜有限公司<span>粤ICP备05108632号- 13 </span></p>
                <div class="qrcode">
                    <img src="/img/footer-qrcode.png">
                    <p>微信扫一扫</p>
                    <p>了解拜亚膜最新动态</p>
                </div>
            </div>
        </div>
        <div class="qrcode-wx" id="qrcode-wx" style="display: none;">
            <div class="title"><span>分享到微信朋友圈</span></div>
            <span class="close">+</span>
            <div id="qrcode-wx-img"></div>
            <div class="tip">打开微信“扫一扫”即可分享至朋友圈</div>
        </div>
    </footer>
    <script src="/js/share.js"></script>
</body>
</html>